<template>
    <li :data-id="itemData.id" class="chansonlist-item">
      <div class="cover u-cover u-cover-1">
        
        <img class="cover-img" :src="itemData.coverImgUrl">
        <a class="mask" href="javascript:void(0);"></a>

        <div class="bottom-play">
          <a class="play-icon" title="播放" @click="clickPlay(itemData.id)"></a>
          <span class="headset"></span>
          <span class="nb">{{compPlayCount}}</span>
        </div>
        
      </div>

      <p class="desc">
        <router-link class="tit" :to="{path: '/playlist?id='+itemData.id}">{{itemData.name}}</router-link>
      </p>
    </li>
</template>
<script>
export default {

  name: "chansonlistItem",

  props: {
    itemData: {
      type: Object,
      default: {}
    }
  },

  computed: {
    compPlayCount(){
      let count = this.itemData.playCount / 10000;
      return count >= 1 ? `${parseInt(count)} 万` : this.itemData.playCount;
    }
  },

  methods: {
    clickPlay(id) {
      // commit 参数一是方法名，参数二是要传的自定义或者接收到的新数据
      this.$store.commit("emptyPlayList");

      // dispatch 触发异步
      this.$store.dispatch("getDetailPlayList", {
          id: id
        })
        .then(() => {
          this.$store.commit("setCurrentPlayIndex", 0);
        });
    }
  }
};
</script>
<style lang='scss' scoped>
  $guide-dot: url(../../../assets/images/index.png) no-repeat;
  $bottom-play: url(../../../assets/images/coverall.png) no-repeat;
  $playListenIcon: url(../../../assets/images/iconall.png) no-repeat;

  .f-cb:after {
    content: "";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
  }

  .chansonlist-item {
    float: left;
    width: 140px;
    height: 188px;
    overflow: hidden;
    padding: 0 0 30px 42px;
    line-height: 1.4;

    .cover-img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }

  .u-cover {
    position: relative;
    display: block;
  }

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: $bottom-play;
  }

  .u-cover-1 .mask {
    background-position: 0 0;
  }

  .desc {
    margin: 8px 0 3px;
    font-size: 14px;

    .tit{
      color: #000;
      display: inline-block;
      max-width: 100%;
      vertical-align: middle;

      &:hover{
        text-decoration: underline;
      }
    }
  }

  .bottom-play {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 27px;
    color: #ccc;
    background: $bottom-play;
    background-position: 0 -537px;

    .nb {
      float: left;
      margin: 7px 0 0 0;
    }
  }

  .play-icon {
    position: absolute;
    right: 10px;
    bottom: 5px;
    width: 16px;
    height: 17px;
    background-position: 0 0;
    background: $playListenIcon;
    cursor: pointer;
  }

  .headset {
    float: left;
    width: 14px;
    height: 11px;
    margin: 9px 5px 9px 10px;
    background: $playListenIcon;
    background-position: 0 -24px;
  }

  .nb {
    float: left;
    margin: 7px 0 0 0;
  }
</style>